<template>
	<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
		<el-table
    :data="tableData"
    style="width: 100%"
	
	>
    <el-table-column align="center"
      label="unid"
      width="250">
      <template slot-scope="scope" >
        <!-- <i class="el-icon-time"></i> -->
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center"
      label="姓名"
      width="250">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <!-- <p>住址: {{ scope.row.address }}</p> -->
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
	<el-table-column align="center"
      label="昵称"
      width="250">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>昵称: {{ scope.row.nickname}}</p>
          <!-- <p>住址: {{ scope.row.address }}</p> -->
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.nickname }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
	<el-table-column align="center"
      label="VIP等级"
      width="250">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>会员等级: {{ scope.row. grade }}</p>
          <!-- <p>住址: {{ scope.row.address }}</p> -->
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row. grade }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column > 
    <el-table-column label="操作"  align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
	</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
	export default {
		 data() {
      return {
        activeName: 'first',
		 tableData: [{
          date: 'mdl7feejt45',
          name: '李白',
		  nickname:'酒剑仙',
		  grade:'vip3',
        }, {
          date: 'mdgfgrty6vo',
          name: '张先生',
		  nickname:'zhang',
		  grade:'vip3',
        }, {
          date: 'wdfewtreh3o',
          name: '陈子安',
		  nickname:'chen',
		  grade:'无',
        }, {
          date: 'mfsregsvo',
          name: '宫本',
		  nickname:'武藏',
		  grade:'vip3',
        } ,{
          date: 'mdl7feejtvo',
          name: '董卓',
		  nickname:'寓意何为',
		  grade:'无',
        }, {
          date: 'mdl7feejtvo',
          name: '王小',
		  nickname:'六六六',
		  grade:'vip2',
        },
		 {
          date: 'mdl7feekkkk',
          name: '王先生',
		  nickname:'jijix',
		  grade:'vip1',
        },
		 {
          date: 'mdl7feejt',
          name: '李先生',
		  nickname:'shuau',
		  grade:'vip2',
        },
		 {
          date: 'mdl7455d5d',
          name: '玖先生',
		  nickname:'hhah',
		  grade:'vip1',
        },]
      };
    }, 
	methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
	   handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
		meta: {
			title: "yhgl",
			icon: "iconfont icon-yonghu",
		},
	};
</script>